<template>
  <div class="bind-container">
    <div class="bind-header">
      <h1>用户注册</h1>
      <p>注册需要使用手机号作为账号的唯一标识</p>
    </div>
    <div class="bind-form">
      <van-field
        :value="mobile"
        type="number"
        clearable
        label="+86"
        title-width="40"
        size="large"
        :maxlength="11"
        placeholder="请输入注册手机号"
        :error-message="errorMessage"
        @change="onChangeInput"
        :border="false"
      />
      <van-field
        :value="nickname"
        title-width="40"
        clearable
        label="昵称"
        size="large"
        :maxlength="30"
        placeholder="请输入用户昵称"
        :error-message="errorMessageNickname"
        @change="onChangeNickname"
        :border="false"
      />
      <van-button
        type="info"
        block
        size="large"
        :disabled="disabled || disabledNickname"
        @click="onRegister"
      >注册</van-button>
    </div>

    <div class="wechat-authent text-center">
      <van-divider
        dashed
        contentPosition="center"
        fontSize="12"
        textColor="#cdcdcd"
      >
        您也可以使用微信授权获取用户信息一键登录
      </van-divider>
      <van-button
        type="primary"
        size="icon"
        :disabled="!disabled && !disabledNickname"
        @click="onLoginByUserProfileWechat"
        round
        icon="wechat"
      />
    </div>

    <div class="bind-footer">
      <div class="bind-footer__inner">
        注册或微信登录即同意
        <a href="/pages/shtml/user/main">用户服务协议</a>
        及
        <a href="/pages/shtml/privacy/main">隐私权保护策略声明</a>
      </div>
    </div>
  </div>
</template>

<script>
// Use Vuex
import { validateMobile } from '@/utils/validate'
import { loginApi } from '@/api'
export default {
  computed: {},
  data () {
    return {
      mobile: '',
      nickname: '',
      errorMessageNickname: '',
      errorMessage: '',
      disabled: true,
      disabledNickname: true
    }
  },
  created () {
    console.log('--------Page bind created')
  },
  methods: {
    onChangeNickname (e) {
      let detail = e.mp.detail
      console.log(detail)
      if (detail.length) {
        this.errorMessage = ''
        this.disabledNickname = false
        this.nickname = detail
      } else {
        this.disabledNickname = true
        this.errorMessageNickname = '请输入用户昵称'
      }
    },
    onChangeInput (e) {
      let detail = e.mp.detail
      if (detail.length === 11) {
        if (validateMobile(detail)) {
          this.errorMessage = ''
          this.disabled = false
          this.mobile = detail
        } else {
          this.errorMessage = '请输入正确的手机号码'
          this.disabled = true
        }
      } else {
        this.disabled = true
      }
    },
    onRegister () {
      if (this.disabled || this.disabledNickname) {
        return
      }
      const params = {
        mobile: this.mobile,
        nickName: this.nickname
      }
      this.onLogin(params)
    },
    onLoginByUserProfileWechat () {
      if (!this.disabled && !this.disabledNickname) {
        return
      }

      console.log('没有登录是需用户登录，准备调用登录接口')
      wx.getUserProfile({
        desc: '用于账号注册时会员资料完善', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log('getUserProfile', res)
          mpvue.setStorageSync('userInfo', res.userInfo)
          this.onLogin(res.userInfo)
        },
        fail: (res) => {
          console.log(res)
          wx.navigateBack({
            delta: 1
          })
        }
      })
    },
    onLogin (data) {
      wx.showLoading({
        title: '加载中'
      })
      console.log('调用登录接口')
      loginApi(data).then(res => {
        mpvue.setStorageSync('mine', res)
        wx.hideLoading()
        wx.navigateBack({
          delta: 1
        })
        wx.showToast({
          title: '用户登录成功'
        })
      }).catch(e => {
        wx.hideLoading()
        console.log(e)
      })
    }
  },
  onShow () {
    console.log('没有登录是需用户登录，准备调用登录接口')
  }
}
</script>

<style lang="less">
.bind {
  &-container {
    padding: 0 28px;
  }
  &-header {
    margin: 30px 0 40px;
    image {
      width: 30%;
      height: 20px;
      display: block;
    }
    h1 {
      font-size: 30px;
      line-height: 50px;
    }
    p {
      font-size: 12px;
      font-weight: 300;
      color: #aaa;
    }
  }
  &-form {
    .van-cell {
      background: #f7f7f7;
      border-radius: 5px;
      margin-bottom: 25px;
      &__title {
        flex: none !important;
        margin-right: 15px;
      }
    }
    .van-field__error-message {
      position: absolute;
      left: 0;
      top: 100%;
    }
    .van-button {
      border-radius: 5px !important;
    }
    .sendcode {
      background: red;
    }
  }
  &-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    &__inner {
      padding: 10px 28px;
      font-size: 12px;
      font-weight: 300;
      color: #ccc;
      a {
        color: #999;
        display: inline;
      }
    }
  }
}
.wechat-authent {
  padding: 20px 15px;
  text-align: center;
}
</style>
